<!--
 * @Description: 简单封装el-dialog, 比较复杂场景直接使用el-dialog实现 
 * @Author: 黄勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-04-08 17:05:13
 * @LastEditors: 黄勇
 -->
<template>
    <el-dialog
        :title="title"
        :visible="isShowDialog"
        :width="width"
        @close="$emit('close')"
        :append-to-body="appendToBody"
        :close-on-click-modal="false"
    >
        <slot />
        <template slot="footer">
            <el-button
                v-if="isShowConfirmBtn"
                type="primary"
                @click="$emit('confirm')"
            >{{confirmText}}</el-button>
            <el-button
                v-if="isShowCancelBtn"
                type="info"
                @click="$emit('close')"
            >{{cancelText}}</el-button>
        </template>
    </el-dialog>
</template>


<script>
export default {
    name: "app-dialog",
    props: {
        // 是否展示弹窗
        isShowDialog: {
            type: Boolean,
            default: false
        },
        // 标题
        title: {
            type: String,
            default: "提示"
        },
        // 宽度
        width: {
            type: [Number, String],
            default: "500"
        },
        //确认文本
        confirmText: {
            type: String,
            default: "确定"
        },
        //  是否展示确认按钮
        isShowConfirmBtn: {
            type: Boolean,
            default: true
        },
        // 取消文本
        cancelText: {
            type: String,
            default: "取消"
        },
        //  是否展示取消按钮
        isShowCancelBtn: {
            type: Boolean,
            default: true
        },
        // 是否插入到body
        appendToBody: {
            type: Boolean,
            default: false
        }
    }
};
</script>